<template>
  <div class="card">
    <div
      class="card-header"
      style="display: flex; justify-content: space-between"
    >
      <div class="card-title">
        <h4 style="margin-block-start: 0; font-size: 1.1rem; font-weight: 400">
          新用户
        </h4>
      </div>
      <div class="select">
        <el-select v-model="value" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
    </div>
    <div
      id="chartline"
      :class="className"
      :style="{ height: height, width: width }"
      style="justify-content: center !important; width: 484px"
    ></div>
  </div>
</template>

<script>
import ApexCharts from "apexcharts";
// require("echarts/theme/macarons"); // echarts theme

export default {
  data() {
    return {
      options: [
        {
          value: "选项1",
          label: "Last 7 Days",
        },
        {
          value: "选项2",
          label: "Last 28 Days",
        },
        {
          value: "选项3",
          label: "Last Month",
        },
        {
          value: "选项4",
          label: "Last Year",
        },
      ],
      value: "Last 7 Days",
    };
  },
  mounted() {
    var options = {
      // 图表基本设定
      chart: {
        height: 350,
        type: "line",
        stacked: false,
      },
      // 是否在线上显示节点数字
      dataLabels: {
        enabled: false,
      },
      // 曲线颜色
      colors: ["#247BA0"],
      // 曲线数据和label
      series: [
        {
          name: "新用户",
          data: [28, 40, 36, 52, 38, 60, 55],
        },
      ],
      stroke: {
        curve: "smooth",
      },
      yaxis: [
        {
          axisBorder: {
            show: true,
            color: "#247BA0",
          },
          labels: {
            style: {
              colors: "#247BA0",
            },
          },
        },
      ],
    };

    var chart = new ApexCharts(document.querySelector("#chartline"), options);

    chart.render();
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    // initChart() {
    //   this.chart = echarts.init(this.$el, "macarons");
    //   this.setOptions(this.chartData);
    // },
    // setOptions({ expectedData, actualData } = {}) {
    //   this.chart.setOption({
    //     xAxis: {
    //       data: [],
    //       boundaryGap: false,
    //       axisTick: {
    //         show: false,
    //       },
    //     },
    //     grid: {
    //       left: 10,
    //       right: 10,
    //       bottom: 20,
    //       top: 30,
    //       containLabel: true,
    //     },
    //     tooltip: {
    //       trigger: "axis",
    //       axisPointer: {
    //         type: "cross",
    //       },
    //       padding: [5, 10],
    //     },
    //     yAxis: {
    //       axisTick: {
    //         show: false,
    //       },
    //     },
    //     legend: {
    //       data: ["expected", "actual"],
    //     },
    //     series: [
    //       {
    //         name: "expected",
    //         itemStyle: {
    //           normal: {
    //             color: "#FF005A",
    //             lineStyle: {
    //               color: "#FF005A",
    //               width: 2,
    //             },
    //           },
    //         },
    //         smooth: true,
    //         type: "line",
    //         data: expectedData,
    //         animationDuration: 2800,
    //         animationEasing: "cubicInOut",
    //       },
    //       {
    //         name: "actual",
    //         smooth: true,
    //         type: "line",
    //         itemStyle: {
    //           normal: {
    //             color: "#3888fa",
    //             lineStyle: {
    //               color: "#3888fa",
    //               width: 2,
    //             },
    //             areaStyle: {
    //               color: "#f3f8ff",
    //             },
    //           },
    //         },
    //         data: actualData,
    //         animationDuration: 2800,
    //         animationEasing: "quadraticOut",
    //       },
    //     ],
    //   });
    // },
  },
};
</script>
<style lang="scss" scoped>
.card-header {
  display: flex;
}
</style>
